<!-- 图片消息组件 -->
<template>
    <div class="pic-msg" v-loading="isLoading" element-loading-text="加载中...">
        <el-image :src="content" fit="scale-down" :preview-src-list="[content]" lazy
            @load="isLoading=false" @error="isLoading=false">
            <!-- 占位图片 -->
            <div slot="placeholder" class="img-default">
                <i class="el-icon-picture-outline icon"></i>
            </div>
            <!-- 错误内容 -->
            <div slot="error" class="img-error">
                <div class="err-info">
                    <i class="iconfont icon-24gl-pictureSplit icon"></i>
                    <div class="info">图片加载失败</div>
                </div>
            </div>
        </el-image>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component({})
export default class PicMsgCom extends Vue {

    // 是否处于加载中
    public isLoading:boolean = true

    // 消息主体，此处应为url
    @Prop({type:String, required:true})
    public content:any

}
</script>

<style lang="less" scoped>
@import '../../css/index.less';
@import '../../css/iconfont.less';
.pic-msg{
    max-width: 100%;
    .img-default, .img-error{
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        .icon{
            color: @theme-color;
            font-size: 50px;
        }
    }
    .img-error{
        .err-info{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .info{
                color: @theme-color;
                font-size: 12px;
                padding: 10px 0;
            }
        }
    }
}
</style>